<script setup lang="ts">
import { ref, watch } from 'vue';

interface TodoItem {
  title: string;
  description?: string;
  completed: boolean;
  priority?: 'high' | 'low' | 'medium';
  dueDate?: string;
}

interface TodoConfig {
  title: string;
  items: TodoItem[];
}

const props = defineProps<{
  config: TodoConfig;
}>();

const emit = defineEmits<{
  'update:config': [config: TodoConfig];
}>();

const localConfig = ref<TodoConfig>({ ...props.config });
const newItem = ref<Partial<TodoItem>>({
  title: '',
  description: '',
  completed: false,
  priority: 'medium',
});

watch(
  localConfig,
  (newVal) => {
    emit('update:config', newVal);
  },
  { deep: true },
);

const addItem = () => {
  if (newItem.value.title?.trim()) {
    localConfig.value.items.push({
      title: newItem.value.title,
      description: newItem.value.description,
      completed: false,
      priority: newItem.value.priority || 'medium',
      dueDate: newItem.value.dueDate,
    });
    newItem.value = {
      title: '',
      description: '',
      completed: false,
      priority: 'medium',
    };
  }
};

const removeItem = (index: number) => {
  localConfig.value.items.splice(index, 1);
};

const priorityOptions = [
  { label: '高', value: 'high' },
  { label: '中', value: 'medium' },
  { label: '低', value: 'low' },
];
</script>

<template>
  <div class="todo-card-config">
    <el-form label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="localConfig.title" placeholder="请输入标题" />
      </el-form-item>

      <el-form-item label="待办事项">
        <div class="todo-items space-y-2">
          <div
            v-for="(item, index) in localConfig.items"
            :key="index"
            class="todo-item flex items-center space-x-2 rounded border p-2"
          >
            <el-checkbox v-model="item.completed" />
            <div class="flex-1">
              <el-input
                v-model="item.title"
                size="small"
                placeholder="任务标题"
              />
              <el-input
                v-model="item.description"
                size="small"
                placeholder="任务描述（可选）"
                class="mt-1"
              />
            </div>
            <el-select v-model="item.priority" size="small" style="width: 80px">
              <el-option
                v-for="option in priorityOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
            <el-date-picker
              v-model="item.dueDate"
              type="datetime"
              size="small"
              placeholder="截止时间"
              format="MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
            <el-button size="small" type="danger" @click="removeItem(index)">
              删除
            </el-button>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="添加事项">
        <div class="add-item space-y-2">
          <el-input
            v-model="newItem.title"
            placeholder="任务标题"
            @keyup.enter="addItem"
          />
          <el-input
            v-model="newItem.description"
            placeholder="任务描述（可选）"
          />
          <div class="flex items-center space-x-2">
            <el-select v-model="newItem.priority" style="width: 100px">
              <el-option
                v-for="option in priorityOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
            <el-date-picker
              v-model="newItem.dueDate"
              type="datetime"
              placeholder="截止时间"
              format="MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
            <el-button type="primary" @click="addItem">添加</el-button>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.todo-items {
  max-height: 300px;
  overflow-y: auto;
}
</style>
